<template>
	<view class="charts-list">
		<navigator class="parkingRent-item" v-for="(item, index) in getChartMapValues()"
			:url="'/pages/charts/chart_page?chartUserId='+item.chartUserId+'&headUserImgUrl='+(item.headUserImgUrl? item.headUserImgUrl:'')"
			hover-class="navigator-hover">
			<view>
				<view class="notRead-warp">
					<span v-if="item.notRead===1" class="notRead">●</span>
				</view>
				<image class="chart-icon" v-if="item.headUserImgUrl" :src="item.headUserImgUrl" />
				<span v-if="!item.headUserImgUrl" class="chart-icon-default">
					<b>
						{{item.chartUserName?item.chartUserName.substring(0,1):''}}
					</b>
				</span>
			</view>
			<view class="chart-msg">
				<view class="chart-msg-info">
					<b class="chart-msg-info-name text-overflow">{{ item.chartUserName }}</b>
					<span class="chart-msg-info-content text-overflow">{{ getLastMsg(item.chartMsgVos) }}</span>
				</view>
				<view class="chart-msg-stat">
					{{ getLastMsgDateTime(item.chartMsgVos) }}
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getToken
	} from '../../common/utils/auth'
	import {
		formatSimpleDate
	} from '../../common/utils/commonUtils'

	export default {
		data() {
			return {}
		},
		onShow() {
			if (getToken()) {
				if (this.getChartMapSize() < 20) {
					this.$store.dispatch("getUserChartList")
				}
			} else {
				uni.showToast({
					title: '请先登录',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'error',
					//显示持续时间为 2秒
					duration: 2000
				})
			}
		},
		async onReachBottom() {
			console.log("onReachBottom");
			this.$store.dispatch("getUserChartList")
		},
		computed: {
			...mapGetters(['getChartMapValues','getChartMapSize']),
		},
		methods: {

			getLastMsgDateTime(chartMsgVos) {
				if (chartMsgVos && chartMsgVos.length !== 0) {
					// 判断 
					let lastMsgTime = chartMsgVos[chartMsgVos.length - 1].createTime
					return formatSimpleDate(lastMsgTime)
				} else {
					return '';
				}
			},

			getLastMsg(chartMsgVos) {
				console.log(chartMsgVos)
				return (chartMsgVos && chartMsgVos.length !== 0) ? chartMsgVos[chartMsgVos.length - 1].msgDetail : ''
			},
		}
	}
</script>

<style lang="scss">
	$chart_both_width: 120rpx;

	.charts-list {
		display: flex;
		flex-direction: column;
	}

	.parkingRent-item {
		display: flex;
		flex-direction: row;
		height: 150rpx;
	}

	.notRead-warp {
		height: 15rpx;
		display: flex;
		flex-direction: row-reverse
	}

	.notRead {
		height: 15rpx;
		color: red;
		font-size: 30rpx;
	}

	.chart-icon {
		height: $chart_both_width;
		width: $chart_both_width;
		margin-left: 15rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		border-radius: 15rpx;
	}

	.chart-icon-default {
		height: $chart_both_width;
		width: $chart_both_width;
		margin-left: 15rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		border-radius: 20rpx;
		background-color: #37a8a6;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 40rpx;
		color: #ffffff;
	}


	.chart-msg {
		width: 100%;
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #e5e5e5;
		margin-right: 20rpx;
	}

	.chart-msg-info {
		width: 70%;
		display: flex;
		flex-direction: column;
	}

	.chart-msg-stat {
		font-size: small;
		color: #9f9f9f;
		width: $chart_both_width;
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
		text-align: right;
	}

	.chart-msg-info-name {
		width: 100%;
		height: 50%;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.chart-msg-info-content {
		width: 100%;
		height: 50%;
		margin-left: 10rpx;
		font-size: small;
		color: #9f9f9f;
	}
</style>
